<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Mosaddek">
		<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<link rel="shortcut icon" href="img/favicon.html">

		<title>addCarOwner</title>

		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-reset.css" rel="stylesheet">
		<!--external css-->
		<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
		<!-- Custom styles for this template -->
		<link href="css/style.css" rel="stylesheet">
		<link href="css/style-responsive.css" rel="stylesheet" />
		<style type="text/css" media="screen">
			body {
				height: 100%;
				overflow: hidden;
			}
		</style>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
		<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<section id="container" class="">
			<!--header start-->
			<header class="header white-bg">
				<div class="sidebar-toggle-box">
					<div data-original-title="Toggle Navigation" data-placement="right" class="icon-reorder tooltips"></div>
				</div>
				<!--logo start-->
				<a href="#" class="logo">车辆<span>管理系统</span></a>
				<!--logo end-->

				<div class="top-nav ">
					<ul class="nav pull-right top-menu">
						<li>
							<input type="text" class="form-control search" placeholder="Search">
						</li>
						<!-- user login dropdown start-->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<img alt="" src="img/avatar1_small.jpg">
								<span class="username">嘿嘿</span>
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu extended logout">
								<div class="log-arrow-up"></div>
								<li>
									<a href="#"><i class=" icon-suitcase"></i>个人资料</a>
								</li>
								<li>
									<a href="#"><i class="icon-cog"></i>设置</a>
								</li>
								<li>
									<a href="#"><i class="icon-bell-alt"></i> 通知</a>
								</li>
								<li>
									<a href="login.html"><i class="icon-key"></i> 退出</a>
								</li>
							</ul>
						</li>
						<!-- user login dropdown end -->
					</ul>
				</div>
			</header>
			<!--header end-->
			<!--sidebar start-->
			<aside>
				<div id="sidebar" class="nav-collapse ">
					<!-- sidebar menu start-->
					<ul class="sidebar-menu">
						<li class="">
							<a class="" href="index.html">
								<i class="icon-dashboard"></i>
								<span>首页</span>
							</a>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-book"></i>
								<span>车辆基本信息管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="carList.html">车辆列表</a>
								</li>
								<li>
									<a class="" href="addCar.html">新增车辆</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu active">
							<a href="javascript:;" class="">
								<i class="icon-cogs"></i>
								<span>车主信息管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="carOwnerList.html">车主列表</a>
								</li>
								<li class="active">
									<a class="" href="addCarOwner.html">新增车主</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-tasks"></i>
								<span>车辆管理费</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="feeList.html">费用列表</a>
								</li>
								<li>
									<a class="" href="chargeMoney.html">收取管理费</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-th"></i>
								<span>车辆变更管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="carTransferList.html">车辆变更列表</a>
								</li>
								<li>
									<a class="" href="addCarTransfer.html">新增车辆变更</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;" class="">
								<i class="icon-glass"></i>
								<span>系统管理</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub">
								<li>
									<a class="" href="queryOwner.html">查看用户</a>
								</li>
								<li>
									<a class="" href="ownerManagement.html">用户管理</a>
								</li>
								<li>
									<a class="" href="quit.html">安全退出</a>
								</li>
							</ul>
						</li>
						<li>
							<a class="" href="login.html">
								<i class="icon-user"></i>
								<span>登录</span>
							</a>
						</li>
					</ul>
					<!-- sidebar menu end-->
				</div>
			</aside>
			<!--sidebar end-->
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">
					<!-- page start-->
					<div class="row">
						<aside class="profile-nav col-lg-3">
							<section class="panel">
								<div class="user-heading round" id="userinfo">
									<a href="#">
										<img src="./img/profile-avatar.jpg" alt="">
									</a>
									<h1 id="username">用户姓名</h1>
									<p id="userid">用户描述</p>
								</div>

								<ul class="nav nav-pills nav-stacked">
									<li>
										<a href="addCarOwner.html"> <i class="icon-user"></i> 主页</a>
									</li>
									<li>
										<a href="#"> <i class="icon-calendar"></i> 近期活动 <span class="label label-danger pull-right r-activity">9</span></a>
									</li>
									<li class="active">
										<a href="carOwnerMessageUpdate.html"> <i class="icon-edit"></i> 修改车主信息</a>
									</li>
								</ul>

							</section>
						</aside>
						<aside class="profile-info col-lg-9">
							<section class="panel">
								<div class="bio-graph-heading">
									新增车主
								</div>
								<div class="panel-body bio-graph-info">
									<h1> 个人信息</h1>
									<form class="form-horizontal" role="form">
										<div class="form-group">
											<label class="col-lg-2 control-label">备注</label>
											<div class="col-lg-10">
												<textarea name="" id="remark" class="form-control" cols="30" rows="10"></textarea>
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">姓名</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="f-name" placeholder=" ">
											</div>
										</div>

										<div class="form-group">
											<label class="col-lg-2 control-label">性别</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="sex" placeholder=" ">
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">身份证号</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="uid" placeholder="必须填写">
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">出生日期</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="b-day" placeholder=" " onclick="jeDate({dateCell:'#b-day',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})"/>
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">录入时间</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="createtime" placeholder=" " onclick="jeDate({dateCell:'#createtime',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})"/>
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">单位或家庭住址</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="address" placeholder=" ">
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">联系电话</label>
											<div class="col-lg-6">
												<input type="text" class="form-control" id="mobile" placeholder=" ">
											</div>
										</div>
										<div class="form-group">
											<label class="col-lg-2 control-label">上传头像</label>
											<div class="col-lg-6">
												<input type='text' id='textfield' class='form-control' />
												<input type="file" class="file-pos" id="headphoto" multiple="multiple" /><br><img src="" id="img0">
											</div>
										</div>

										<div class="form-group">
											<div class="col-lg-offset-2 col-lg-10">
												<button type="submit" class="btn btn-success" onclick="insert();return false;">保存</button>
												<button type="reset" class="btn btn-default">取消</button>
											</div>
										</div>
									</form>
								</div>
							</section>
						</aside>
					</div>

					<!-- page end-->
				</section>
			</section>
			<!--main content end-->
		</section>

		<!-- js placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
		<script src="assets/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.scrollTo.min.js"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>

		<!--common script for all pages-->
		<script src="js/common-scripts.js"></script>

		<!--script for this page only-->
		<script src="js/jedate/jedate.js"></script>
		<script src="js/external-dragging-calendar.js"></script>
		<script type="text/javascript">
			function insert() {
				var common = $('#remark').val(),
					name = $('#f-name').val(),
					sex = $('#sex').val(),
					id = $('#uid').val(),
					birthday = $('#b-day').val(),
					create_time = $('#createtime').val(),
					address = $('#address').val(),
					phone = $('#mobile').val(),
					picture_urls = $('#textfield').val();

				var datalist = {
					common: common,
					name: name,
					sex: sex,
					id: id,
					birthday: birthday,
					create_time: create_time,
					address: address,
					phone: phone,
					picture_urls: picture_urls
				};
				var t = JSON.stringify(datalist);

				$.ajax({
					url: 'caruser_insert.action',
					type: 'POST',
					dataType: 'json',
					data: "data=" + t,

					success: function(data) {
						alert(data.data);
						var coment = '<a href="#">' +
							' <img src="' + picture_urls + '"alt="头像信息">' +
							' </a>' +
							'<h1 >' + $("#f-name").val() + '</h1>' +
							' <p >' + $("#remark").val() + '</p>'

						$("#userinfo").html(coment);
						console.log('success');
					},

					error: function(data) {
						alert(data.data);
					}

				})
			}

			//获取真实上传路径
			function getObjectURL(file) {
				var url = null;
				if(window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if(window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if(window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
			$("#headphoto").change(function() {
				var objUrl = getObjectURL(this.files[0]);　　
				console.log("objUrl = " + objUrl);　　
				if(objUrl) {　　　
					$("#textfield").attr("value", objUrl);
					$("#img0").attr("src", objUrl);
				}
			});
			//方法二

			/* $(function() {
           var userId = $('.userId').val(),
               password = $('.password').val();
           var datalist = {
               id: userId,
               password: password
           };
  
           loginInfo.push(JSON.stringify(datalist));
           $.ajax({
               url: '',
               type: 'POST',
               dataType: 'json',
               data: ,
               success: function(data) {
                  console.log('success');
                  
               }
           })
        }) */
		</script>

	</body>

</html>